<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <com-arr-obj></com-arr-obj>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        const com = {
            props: ['msg', 'num', 'boo', 'arr', 'obj'],
            template: `<div>子组件1 {{msg}} {{typeof num}} {{num}} {{boo}} {{typeof boo}} {{arr}} {{arr[1]}} {{obj}} {{typeof obj}} {{obj.name}}</div>`
        }

        Vue.component('ComArrObj', {
            template: `<div>子组件2 {{pmsg}}
                 <com :msg="pmsg" :num="22" :boo="pboo" :arr="parr" :obj="pobj"></com> 
                 </div>`, // 加冒号是属性  不加冒号是字符串

            data() {
                return {
                    // 字符串
                    pmsg: "生很容易,或很容易,生活不容易",
                    // 数字
                    // pnum: 22,
                    // 布尔值
                    pboo: true,
                    // 数组
                    parr: [21, 34, 56],
                    // 对象
                    pobj: { name: 'zs' }
                }
            },
            components: {
                com: com
            }
        })


        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},

        })
    </script>
</body>

</html>